<template>
  <div class="page">
    <button @click="getSelectedRows()">Get Selected Rows</button>
    <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
    <ag-grid-vue style="width: 50%; height: 500px;" class="ag-theme-alpine" :columnDefs="columnDefs" :rowData="rowData"
      :enableColResize="true" rowSelection="multiple">
    </ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue'

export default {
  name: '',
  components: {
    AgGridVue
  },
  props: {},
  data() {
    return {
      columnDefs: null,
      rowData: null,
      gridApi: null,
      columnApi: null
    }
  },
  watch: {},
  computed: {},
  methods: {
  },
  created() { },
  mounted() { },
  beforeMount() {
    this.rowData = [
      {
        athlete: 'Michael Phelps',
        medals: {
          gold: 8, silver: 1, bronze: 0
        }
      }
    ];
    this.columnDefs = [
      { field: 'athlete' },
      // Using dot notation to access nested property
      { field: 'medals.gold', headerName: 'Gold' },
    ];
  }
} 
</script>
<style lang="scss">
@import "~ag-grid-community/styles/ag-grid.css";
@import "~ag-grid-community/styles/ag-theme-alpine.css";
</style>
<style scoped>
/* lang="scss" */
</style>